<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
    <link rel="stylesheet" href="./lib/reset.css">
    <link rel="stylesheet" href="./css/searchList.css">

</head>

<body>
    <div class="head" for="input">
        <div class="head-z"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-right1 "></use>
            </svg></div>


        <div class="inp">
            <span>
                    <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-weibiaoti-"></use>
                        </svg>
            </span>
               
              <input type="text" value="" id="surface-input">
            <span class="xx">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-guanbi"></use>
                </svg>
            </span>
        </div>
        <div class="head-y">
            <svg class="icon hang" aria-hidden="true" state="1">
                <use xlink:href="#icon-liebiao1"></use>
            </svg>
            <svg class="icon col-show" aria-hidden="true" state="2">
                <use xlink:href="#icon-liebiao-copy"></use>
            </svg>
        </div>
    </div>

    <div class="filter-bar">
<ul>
    <li data-state="1">
        综合 
        <span>
                <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon--arrow-down"></use>
                      </svg>
        </span>
    </li>
    <li data-state="2">
       销量
        </li>

        <li data-state="3">
              价格
                <span>
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon--arrow-down"></use>
                     </svg>
                </span>
            </li>
            <li>
                    筛选
                    <span>
                            <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-shaixuan"></use>
                                  </svg>
                    </span>
                </li>
</ul>

    </div>

    <div class="multiple-filterbar">
<ul>
    <li>
        百联配送
    </li>
    <li>
        品牌
    </li>
    <li>
        自提
    </li>
    <li>
        促销
    </li>
</ul>
    </div>

    <div class="goods-k">
        <ul class="row">


<!-- 竖排显示 -->
            <!-- <li>
                <div >
                    <img class="goods-img" src="" alt="">
                </div>
                <div class="goods-referral">
                    <div class="title">
                            天鹅座 禧红 /淑女漫绘馆唯美新漫画系列
                    </div>
                    <div class="zhekou">

                    </div>
                    <div class="goods-foot">
                       <div class="price">￥28.8</div>
                       <div>
                           <span class="com">
                                <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-daipingjia"></use>
                                </svg>
                           </span>
                            <span class="comment">0</span>
                        </div>


                        <div>
                            <span class="hao">
                                    <svg class="icon"  aria-hidden="true">
                                            <use xlink:href="#icon-zan1"></use>
                                    </svg>
                            </span>
                            <span class="haoping ">100%</span>
                        </div>
                        <div class="addcar">
                             
                        </div>
                    </div>
                </div>
            </li> -->
            

                        <!-- 横排显示 -->
            <!-- <li class="row-goods-list">
                
                    <img  class="row-goods-img goods-img" src="" alt="">
                
                <div class="goods-referral">
                    <div class="title">
                            天鹅座 禧红 /淑女漫绘馆唯美新漫画系列
                    </div>
                    <div class="zhekou">

                    </div>
                    <div class="goods-foot">
                       <div class="price row-price">￥28.8</div>
                       <div>
                           <span class="com">
                                <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-daipingjia"></use>
                                </svg>
                           </span>
                            <span class="comment">0</span>
                        </div>


                        <div>
                            <span class="hao">
                                    <svg class="icon"  aria-hidden="true">
                                            <use xlink:href="#icon-zan1"></use>
                                    </svg>
                            </span>
                            <span class="haoping ">100%</span>
                        </div>
                        <div class="addcar row-addcar">
                             
                        </div>
                    </div>
                </div>
            </li> -->
<!-- 没有商品 -->
<!-- <h5>
    暂无产品
</h5> -->
          
             
        </ul>
    </div>

    <!-- 点击input左滑进入搜索界面 -->

    <div class="search">
     <div class="search-cont">

         
         <div class="head">
       
            <div class="inp">
                <span class="search-but">
                        <svg class="icon" aria-hidden="true" >
                                <use xlink:href="#icon-weibiaoti-"></use>
                            </svg>
                </span>
                   
                  <input type="text" value="" id="input">
                <span class="xx2">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanbi"></use>
                    </svg>
                </span>
            </div>
            <div class="head-y row-herd-y">
             取消
            </div>
        </div>
        <div class="search-container">
            <div class="record">
               <div class="zuijin">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shijian"></use>
                </svg>
                <span>最近搜索</span>
               </div>
               <div class="del">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shanchulajixiang"></use>
                </svg>
               </div>
            </div>
            <div class="record-cont">
                <ul>
                    <li>
                        华为
                    </li>
                 
                
                
                </ul>
            </div>

            <div class="remen">
                    <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xing"></use>
                        </svg>
                        <span>热门搜索</span>
            </div>
            <div class="remen-cont">
                <ul>
                        <li>
                                红天鹅
                            </li>
                            <li>
                                显卡
                            </li>
                            <li>
                                   华为
                                </li>
                                <li>
                                周大生
                                </li>
                                <li>
                                        咖啡
                                    </li>
                                    <li>油</li>
                                    <li>养乐多</li>
                </ul>
            </div>
        </div>

     </div>
    </div>

    <!-- loading动画 -->
<div class="loading">
    
</div>
<div id="bh"></div>









    <script src="./font/iconfont.js"></script>
    <script src="./js/ml-fontsize.js"></script>
    <script src="./lib/zepto.js"></script>
    <script src="./lib/touch.js"></script>
    <script src="./lib/fastclick.js"></script>
    
    <script src="./lib/ejs.min.js"></script>
    <script type="text/template" id="ejs-html" src="">
        
        <% for(var i = 0; i < item.length; i++){ %>
        <li>
           
            <input type="hidden" id="proid" value="<%= item[i]['Id'] %>" >
            <div >
                <img class="goods-img" src="<%= item[i]['img_url'] %>" alt="">
            </div>
            <div class="goods-referral">
                <div class="title">
                    <%= item[i]['title'] %>
                </div>
                <div class="zhekou">
                    <% if(item[i]["active"]) {%>
                        <%=item[i]["active"] %>
                        <%}%>
                </div>
                <div class="goods-foot">
                   <div class="price"><%=  Number(item[i]['price']).toFixed(2) %></div>
                   <div>
                       <span class="com">
                            <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-daipingjia"></use>
                            </svg>
                       </span>
                        <span class="comment"><%= item[i]['comment'] %></span>
                    </div>
    
    
                    <div>
                        <span class="hao">
                                <svg class="icon"  aria-hidden="true">
                                        <use xlink:href="#icon-zan1"></use>
                                </svg>
                        </span>
                        <span class="haoping "><%= item[i]['haoping']*100 %>%</span>
                    </div>
                    <div class="addcar">
                         
                    </div>
                </div>
            </div>
      
        </li>
        <% } %>
    </script>
    <script src="./js/searchList.js"></script>
</body>

</html>